<script>
import axios from "axios";
import {getToken, saveToken} from "@/store/token";
import Payment from "@/components/Payment.vue";
import refund from "@/components/Refund.vue"

export default {
  name: "orderTable",
  components: {Payment, refund},
  props: ["status"],
  data() {
    return {
      state: {
        //搜索关键字
        keyword: '',
        page: 1,
        size: 2,
        orders: [],
        total: 0,
      },
      payVisible: false,
      refundVisible: false,
      orderId: "",
      shouldPay: 0
    }
  }, filters: {
    myFilter(value) {
      return parseFloat(value).toFixed(2);
    }
  }, methods: {
    otPayVisible(val) {
      this.payVisible = val
      this.refundVisible = val
      this.shouldPay = 0
      this.state.page = 1
      this.getOrders();
    },
    search() {
      this.getOrders()
    },
    toPay(orderId, val) {
      if (val === 'pay') {
        this.orderId = orderId
        this.payVisible = true;
      } else {
        this.$api.order.updateOrder(
            orderId,
            '',
            JSON.parse(getToken("user")).id,
            4
        ).then(res => {
          if (res.data.success) {
            this.$message({
              message: '交易成功',
              type: 'success'
            });
          } else {
            this.$message({
              message: '服务器原因，收货失败',
              type: 'error'
            });
          }
        }).catch(res => {
          this.$message({
            message: '服务器端错误',
            type: 'error'
          });
        })
      }
    },
    refundOrder(orderId, val) {
      this.shouldPay = val
      this.orderId = orderId
      this.refundVisible = true
    },
    getOrders() {
      var userId = JSON.parse(getToken("user")).id
      this.$api.order.getOrders(
          this.state.page,
          this.state.size,
          this.state.keyword,
          userId,
          this.status
      ).then(res => {
        if (res.data.success) {
          this.state.orders = res.data.content
          this.state.total = Number(res.data.total)
        }
      })
    },
    deleteOrder(orderId, val) {
      if (val === 'can') {
        val = '取消'
      } else {
        val = '删除'
      }
      this.$confirm('此操作将' + val + '该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (val === '删除') {
          this.$api.order.deleteOrder(
              orderId,
              JSON.parse(getToken("user")).id
          ).then(res => {
            if (res.data.success) {
              this.$message.success(val + "成功");
              this.state.page = 1
              this.getOrders()
            }
          })
        } else {
          this.$api.order.updateOrder(
              orderId,
              '',
              JSON.parse(getToken("user")).id,
              5
          ).then(res => {
            if (res.data.success) {
              this.$message({
                message: '取消成功',
                type: 'success'
              });
            } else {
              this.$message({
                message: '服务器原因，取消失败',
                type: 'error'
              });
            }
          }).catch(() => {
            this.$message({
              message: '服务器端错误',
              type: 'error'
            });
          })
        }
        this.getOrders()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  }, mounted() {
    this.getOrders()
  }
}
</script>

<template>
  <div>
    <div style="margin-bottom: 10px">
      <el-input
          v-model="state.keyword"
          placeholder="商品名称/订单号"
          prefix-icon="el-icon-search"
          style="width: 400px;margin-right: 10px"
          clearable
          @clear="search"
          @keydown.enter.native="search"></el-input>
      <el-button
          type="primary"
          @click="search">
        搜索
      </el-button>
    </div>
    <div v-if="state.orders.length>0">
      <div class="order-title">
        <div style="width: 410px;"><span>宝贝</span></div>
        <div style="width: 110px;"><span>单价</span></div>
        <div style="width: 130px;"><span>商品操作</span></div>
        <div style="width: 130px;"><span>实付款</span></div>
        <div style="width: 120px;"><span>交易状态</span></div>
        <div style="width: 130px;"><span>交易操作</span></div>
      </div>
      <div class="order-body" v-for="(order,index) in state.orders">
        <div class="order-body-title">
          <div style="display: flex;font-size: 14px">
            <span style="margin: 0 20px">{{ order.createTime }}</span>
            <div><span style="color:#3c3c3c;">订单号:{{ order.orderId }}</span></div>
          </div>
          <!--<div class="el-icon-delete" style="cursor: pointer" @click="deleteOrder(order.orderId)"/>-->
        </div>
        <div style="display:flex;border: 1px solid #f5f5f5;">
          <div style="display: flex;flex-direction: column;">
            <div v-for="(items,indexItems) in order.orderItems">
              <div class="body-baby">
                <div class="order-body-baby">
                  <div style="margin-right: 10px">
                    <el-image class="order-baby-img" :src="items.periodical.coverAddress" alt=""/>
                  </div>
                  <div style="display: flex;flex-direction: column">
                    <span>{{ items.periodical.name }}</span>
                    <span style="color:#646464;font-size: 14px">购买数量：{{ items.num }}&nbsp;购买年数：{{
                        items.year
                      }}<br/>起刊时间：{{
                        items.startTime
                      }}</span>
                  </div>
                </div>
                <div class="order-all" style="width: 100px;">
                  <span>￥<span style="text-decoration: line-through">{{ items.price * 1.2 | myFilter }}</span></span>
                  <span style="margin-top: 5px">￥<span style="color: #ff791f;">{{
                      items.price | myFilter
                    }}</span></span>
                </div>
              </div>
            </div>
          </div>
          <div class="order-all order-bottom" style="width: 60px;">
            <a v-if="order.orderStatus >=2 && order.orderStatus<=3" @click="refundOrder(order.orderId,order.shouldPay)"
               style="cursor: pointer">申请退款</a>
          </div>
          <div class="order-all order-bottom" style="width: 160px; text-align: center">
            <span>￥<span style="color: #ff791f;">{{ order.shouldPay | myFilter }}</span></span>
          </div>
          <div class="order-all order-bottom" style="width: 120px;">
            <el-tag v-if="order.orderStatus===1">待付款</el-tag>
            <el-tag v-if="order.orderStatus===2" type="warning">待发货</el-tag>
            <el-tag v-if="order.orderStatus===4">已发货</el-tag>
            <el-tag type="success" v-if="order.orderStatus===3">已完成</el-tag>
            <el-tag v-if="order.orderStatus===5" type="warning">已取消</el-tag>
            <el-tag v-if="order.orderStatus===6" type="warning">退款处理中</el-tag>
            <el-tag v-if="order.orderStatus===7" type="success">退款成功</el-tag>
            <el-tag v-if="order.orderStatus===8" type="danger">拒绝退款</el-tag>
          </div>
          <div class="order-all order-bottom" style="width: 96px;">
            <span v-if="order.orderStatus===1" style="cursor: pointer" @click="toPay(order.orderId,'pay')">去支付</span>
            <span v-if="order.orderStatus===1" style="cursor: pointer;margin-top: 10px"
                  @click="deleteOrder(order.orderId,'can')">取消订单</span>
            <span v-if="order.orderStatus===3" style="cursor: pointer">
            <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='取消'
                icon="el-icon-info"
                @confirm="toPay(order.orderId,'shouHuo')"
                title="确定好商品无误，要收货吗？">
                <el-button type="primary" size="mini" slot="reference">确认收货</el-button>
            </el-popconfirm></span>
            <el-popover
                v-if="order.orderStatus===8"
                placement="top-start"
                title="拒绝原因"
                width="200"
                trigger="hover"
                :content="order.refuseCause+',对结果有问题联系管理员'">
              <el-button slot="reference">查看原因</el-button>
            </el-popover>
          </div>
        </div>
      </div>
      <div style="width: 20px;margin: 10px auto 0">
        <el-pagination
            @current-change="getOrders"
            :current-page.sync="state.page"
            :page-size="state.size"
            layout="total, prev, pager, next"
            :total="state.total">
        </el-pagination>
      </div>
    </div>
    <div v-else style="width: 100%;height: 100px;">暂无数据</div>
    <payment v-if="payVisible" @changeVal="otPayVisible" :order-id="orderId"></payment>
    <refund v-if="refundVisible" :order-id="orderId" :return-total="shouldPay"
            @changeVal="otPayVisible"></refund>

  </div>

</template>

<style scoped>
a:hover {
  color: #ffb0b0;
}
</style>